<template>
  <div class="station-detail detail-wrap">
    <Head title="电站信息" isBack>
      <template #content>
        <Detail
          :columns="3"
          :form="data.detailForm"
          :detail="data.detailData"
          align="right"
        ></Detail>
      </template>
    </Head>
    <Head title="充电单价" class="qc-table-wrap price-list">
      <template #content>
        <div v-for="(item, index) in data.priceList" :key="index">
          <el-table
            :data="item.list"
            border
            :class="{ 'table-spacing': index > 0 }"
          >
            <el-table-column
              prop="date"
              label="协议版本"
              width="90"
              align="center"
            >
              <el-table-column
                width="90"
                type="index"
                label="序号"
                align="center"
              />
            </el-table-column>
            <el-table-column :label="item.title">
              <el-table-column prop="time" label="时段" />
              <el-table-column prop="pricePower" label="电费（元/度）">
              </el-table-column>
              <el-table-column
                prop="priceService"
                label="服务费（元/度）"
              ></el-table-column>
            </el-table-column>
          </el-table>
        </div>
      </template>
    </Head>
    <Head title="终端列表">
      <template #content>
        <Table
          ref="tableRef"
          :columns="data.columns1"
          @get-list="getData"
        ></Table>
      </template>
    </Head>
  </div>
</template>

<script lang="ts" setup>
import Head from '@/components/head/index.vue';
import Detail from '@/components/form/detail.vue';
import Table from '@/components/table/index.vue';
import {
  queryCecStationDetail,
  pageQueryCecConnectorByStationId,
} from '@/service/apis/pile';
import { queryDicByParent } from '@/service/apis/api';
import { getUdp, getTcp } from '../components/price';
import { STATION_SITE, STATION_STATUS_USE } from '@/utils/dictionaries';

const route = useRoute();
const {
  query: { id },
} = route;
const tableRef = ref();

queryDicByParent({
  listDtos: [
    'stationStatus',
    'stationAddress',
    'property',
    'stationType',
    'construction',
    'shareType',
    'serviceSetup',
    'baseSetup',
    'protocolVersion',
  ],
}).then((res: any) => {
  if (res) {
    console.log('ddd--', res);
    data.detailForm[6].dic = res.stationType;
    data.detailForm[7].dic = res.construction;
    data.protocolVersion = res.protocolVersion;
  }
});

const data = reactive({
  protocolVersion: [] as any,
  detailData: {} as any,
  priceList: [] as any,
  detailForm: [
    {
      label: '电站ID',
      prop: 'id',
    },
    {
      label: '电站名称',
      prop: 'stationName',
    },
    {
      label: '电桩总功率',
      prop: 'sumPower',
      unit: 'kW',
    },
    {
      label: '电站地址',
      prop: 'address',
    },
    {
      label: '场地坐标',
      prop: 'stationLng',
      template: (row: any, index: number) => {
        if (!row.stationLng) return '--';
        return `${row.stationLng}，${row.stationLat}`;
      },
    },
    {
      label: '运营商',
      prop: 'operatorName',
    },
    {
      label: '电站类型',
      prop: 'stationType',
      dic: [] as any,
    },
    {
      label: '建设场所',
      prop: 'construction',
      dic: [] as any,
    },
    {
      label: '停车说明',
      prop: 'parkExplain',
    },
    {
      label: '开放时间说明',
      prop: 'openExplain',
    },
    {
      label: '车位数量',
      prop: 'countParking',
    },
    {
      label: '备注说明',
      prop: 'remarks',
    },
    {
      label: '启停状态',
      prop: 'isEnableStart',
      dic: STATION_STATUS_USE,
    },
    {
      label: '电站更新时间',
      prop: 'updateTime',
    },
  ],
  columns: [
    {
      prop: 'time',
      label: '时段',
    },
    {
      prop: 'pricePower',
      label: '电费（元/度）',
    },
    {
      prop: 'priceService',
      label: '服务费（元/度）',
    },
  ],
  columns1: [
    {
      prop: 'connectorCode',
      label: '设备ID',
    },
    {
      prop: 'connectorName',
      label: '接口名称',
    },
    {
      prop: 'typeName',
      label: '接口类型',
    },
    {
      prop: 'power',
      label: '额定功率（kW）',
    },
    {
      prop: 'workStatusName',
      label: '工作状态',
    },
  ],
});

queryCecStationDetail({ id: id }).then((res: any) => {
  console.log('res---', res);
  if (res) {
    data.detailData = res;
    // 电站价格
    data.priceList = [];
    res.stationCostBatchNumberInfoPOList.forEach((item: any) => {
      let list =
        item.protocolVersion === '1'
          ? getUdp(res.costTemplateUdpPOList)
          : getTcp(
              res.costTemplateTcpPriceSetPOList,
              res.costTemplateTcpPriceTypePOList
            );
      data.priceList.push({
        title: data.protocolVersion.find(
          (it: any) => item.protocolVersion === it.value
        ).label,
        list: list,
      });
    });
  }
});

const getData = (page: any) => {
  pageQueryCecConnectorByStationId({ stationId: id }, page).then((res: any) => {
    if (res) {
      console.log('res---', res);
      if (page.pageNo !== 1 && (!res.dataList || res.dataList?.length === 0)) {
        page.pageNo--;
        getData(page);
        return;
      }
      nextTick(() => {
        tableRef.value?.setTable({
          total: res.totalCount,
          table: res.dataList,
        });
      });
    }
  });
};
</script>

<style lang="scss" scoped>
// @import '@/components/table/index.scss';
// .station-detail {
.price-list {
  width: calc(100% - 70px);
  margin: 0;
  border: 0;
  background-color: #fff;
  :deep(.el-table) {
    margin: 0 35px;
    --el-table-border-color: #d9d9d9;
    border-radius: 0;
  }
  .table-spacing {
    margin-top: 12px;
  }
}
// }
</style>